import { Form, Select, Input, Button, Table, message, DatePicker } from 'antd';
import React, { useEffect, useState } from 'react';
import type { ColumnsType } from 'antd/es/table';
import * as service from '../../../api/zzachieve';
import * as service1 from '../../../api/zzachieve1';
import { useNavigate } from 'react-router-dom';
import "./ApprovalFirst.scss"
import ExportJsonExcel from 'js-export-excel'

interface Props {

}

interface DataType {
    id: number,
    key: string;
    img: string;
    link: string;
    alt: string;

}
function AchieFirst(props: Props) {

    // const form = Form.useFormInstance()

    const [form] = Form.useForm()

    const { Option } = Select;

    const { Search } = Input;

    let [tabledata, setTableData] = useState([])

    let navigate = useNavigate()

    const [messageApi, contextHolder] = message.useMessage();

    const { RangePicker } = DatePicker;

    const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);

    let handadd = () => {
        navigate('/index/achievements/achieFirstAdd')
    }


    //表格列的配置
    // useEffect(() => {
    //     service.people_agree().then((res) => {
    //         console.log(res.data);
    //         res.data.map((item: any) => {
    //             item.key = item.id
    //         })
    //         setTableData(res.data)
    //     })
    // }, [])
    useEffect(() => {
        service1.people_agree().then((res) => {
            console.log(res.data);
            res.data.map((item: any) => {
                item.key = item.id
            })
            setTableData(res.data)
        })
    }, [])


    const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
        console.log('selectedRowKeys changed: ', newSelectedRowKeys);
        setSelectedRowKeys(newSelectedRowKeys);
    };
    const rowSelection = {
        selectedRowKeys,
        onChange: onSelectChange,
    };
    const hasSelected = selectedRowKeys.length > 0;
    const columns: ColumnsType<DataType> = [
        {
            title: '审批编号',
            dataIndex: 'name',
            key: "name"
        },
        {
            title: '审批标题',
            dataIndex: 'title',
            key: "title"
        },
        {
            title: '发起时间',
            dataIndex: 'time',
            key: "time"
        },
        {
            title: '发起人',
            dataIndex: 'people',
            key: "people"
        },
        {
            title: '审批状态',
            dataIndex: 'status',
            key: "status"
        },
        {
            title: '审批类型',
            dataIndex: 'type',
            key: "type"
        },
        {
            title: '审批摘要',
            dataIndex: 'more',
            key: "more"
        },

        {
            title: '操作',
            dataIndex: 'e',
            key: "e",
            render: (_, record) => {
                return <>
                    <a onClick={handlemore}>查看详情</a>
                </>
            }
        },
    ];
    let handlemore = () => {
        navigate('/index/achievements/achieThirdMore')
    }


    let onSearch = async (value: String) => {
        let res = await service.people_agreesearch({ title_like: value })
        console.log(res.data);
        res.data.map((item: any) => {
            item.key = item.id
        })
        setTableData(res.data)


    }
    let down = () => {
        let option: {
            fileName: string
            datas: {//声明下面的类型
                sheetData: any[],
                sheetName: string,
                sheetFilter: string[],
                sheetHeader: string[],
                columnWidths: number[]
            }[]
        };
        option = {
            fileName: "员工考核计划", // 导出的文件的名称
            datas: [
                {
                    sheetData: tabledata, // 表格数据
                    sheetName: "产品列表1", // excel表格中表格的名字
                    sheetFilter: ["name", "title", "time", "people", "status", "type", "more"], // 需要导出的数据的字段
                    sheetHeader: ["审批编号", "审批标题", "发起时间", "部门", "审批状态", "审批类型", "审批摘要"], // 表头的值
                    columnWidths: [20, 20],
                },
            ]
        }

        var toExcel = new ExportJsonExcel(option); //new
        toExcel.saveExcel(); //保存
    }
    return (
        <div className='first'>
            <div className='top'>
                <div className='colo'></div>
                <div className='text'>考核计划</div>
            </div>
            <div className='middle'>
                <div className='left'>
                    <Form
                        form={form}
                    >
                        <Form.Item name="gender" label="审批类型" rules={[{ required: false }]}>
                            <Select

                                placeholder="请选择"
                                allowClear

                            >
                                <Option value="全部">全部</Option>
                                <Option value="月度">月度</Option>
                                <Option value="季度">季度</Option>
                                <Option value="半年度">半年度</Option>
                                <Option value="年度">年度</Option>
                                <Option value="其他">其他</Option>
                            </Select>
                        </Form.Item>
                        <Form.Item name="gender" label="审批状态" rules={[{ required: false }]}>
                            <Select

                                placeholder="请选择"
                                allowClear
                            >
                                <Option value="审批中">审批中</Option>
                                <Option value="审批通过">审批通过</Option>
                                <Option value="审批拒绝">审批拒绝</Option>
                                <Option value="审批撤销">审批撤销</Option>
                            </Select>
                        </Form.Item>


                        <Form.Item label="考核周期" name='cycle'>
                            <RangePicker picker="month" />
                        </Form.Item>


                        <Search placeholder="请输入关键字"
                            onSearch={onSearch}
                            style={{ width: 200 }} />

                        <Form.Item name='go'>
                            <Button type="primary" onClick={down}>导出</Button>
                        </Form.Item>
                        {contextHolder}
                    </Form>
                </div>



            </div>
            <div className='bottom'>
                {/* columns 表格列的配置 */}
                <Table rowSelection={rowSelection} columns={columns} dataSource={tabledata} />
            </div>
        </div >
    );
}
export default AchieFirst;